<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <style>
            p {border: medium double black;}
        </style>
    </head>
    <body>

        <p id="textblock" dir="ltr" lang="en-US">
            There are lots of different kinds of fruit - there are over 500 varieties
            of <span id="banana">banana</span> alone. By the time we add the countless
            types of <span id="apple">apples</span>,
            <span="orange">oranges</span>, and other well-known fruit, we are
            faced with thousands of choices.
        </p>
        <pre id="results"></pre>
        <script>
            var results = document.getElementById("results");
            var elem = document.getElementById("textblock");
            // tagName标签名，标识元素类型
            results.innerHTML += "tag: " + elem.tagName + "\n";
            // id属性值
            results.innerHTML += "id: " + elem.id + "\n";
            // 文字方向值
            results.innerHTML += "dir: " + elem.dir + "\n";
            // 语言属性值
            results.innerHTML += "lang: " + elem.lang + "\n";
            // 是否隐藏
            results.innerHTML += "hidden: " + elem.hidden + "\n";
            // 是否不显示
            results.innerHTML += "disabled: " + elem.disabled + "\n";
        </script>
    </body>
</html>
